<template>
	<view>
		<view class="title">
			{{type==1?'交易时间':'兑换时间 '}}<text>(时间结束后将自动取消)</text>
		</view>
		<view class="top">
			<image class="th" src="../static/a11.png"></image>
			您的剩余上传时间为 <text class="font">
				<u-count-down ref="uCountDown" :timestamp="timestamp" @end="toCheckNotSumbit" :showHours="false" :autoplay="true"></u-count-down><text
				 style="font-size: 30rpx;"></text>
			</text>，请尽快上传
		</view>
		<view class="title">
			{{type==1?'兑换信息':'兑换信息'}}
		</view>
		<view class="user">
			<image :src="getHead(info.icon)" class="head"></image>
			<view class="left" v-if="type==1">
				<view class="view">
					<view class="name">
						兑换目标
					</view>
					<view class="text">
						{{info.username}}
					</view>
				</view>
				<view class="view">
					<view class="name">
						兑换数量
					</view>
					<view class="text add">
						{{info.apply_price}} <text> Fmb</text>
					</view>
				</view>
			</view>
			<view class="right" v-if="false" @click="toPage('/pages/htmlB/voucher/see?number='+info.real_number+'&zhujian_id='+info.zhujian_id+'&img='+info.shoukuanma)">
				<image src="../static/vo1.png" mode=""></image>
				<view class="name">
					查看收款码
				</view>
			</view>
			<view class="right" v-else @click="show=true">
				<image src="../static/vo1.png" mode=""></image>
				<view class="name">
					查看收款码
				</view>
			</view>
		</view>
		<view class="title">
			{{type==1?'交易凭证':'兑换凭证'}}
		</view>
		<view class="content">
			<view class="left">
				<view class="add" :style="'background-image: url('+img_pre + cover+');'" @click="upload">
					<image :src="picture" mode=""></image>
					<view class="name">
						上传凭证
					</view>
				</view>
				<view class="text">
					*转账金额应为 <text>{{info.real_number}} </text>
				</view>
			</view>
			<view class="right">
				<image src="../static/pay.png" mode=""></image>
				<view class="text">
					示例图片
				</view>
			</view>
		</view>
		<view class="button">
			<u-button :ripple="true" @click="checkSafePasswordEmpty" class="u-button">确认上传</u-button>
		</view>
		<u-keyboard mode="number" :dot-enabled="false" v-model="pay" :tooltip="false" @change="onChange" @backspace="onBackspace">
			<view>
				<view class="u-text-center">
					<view class="u-text-name">
						二级密码
					</view>
					<view class="u-text-text">
						您当前正在进行交易，为确保账户安全请输入二级 密码验证身份
					</view>
				</view>
				<view class="u-flex u-row-center">
					<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password" :disabled-keyboard="true"></u-message-input>
				</view>
				<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips"></view>
			</view>
		</u-keyboard>
		<u-popup v-model="show" close-icon-pos="top-left" :closeable="true" borderRadius="10" mode="bottom">
			<view class="payType">
				<view class="_view">
					<view class="title_item">
						选择查看收款码类型
					</view>
					<u-radio-group v-model="likeFruit" @change="checkboxGroupChange" :width="radioCheckWidth" :wrap="radioCheckWrap">
						<view class="contentType">
							<u-row>
								<u-col :span="4" v-for="(item,index) in payType" :key="index">
									<view class="list" @click="checkboxGroupChange(item.type)">
										<image :src="'../../../static/image/r'+index+'.png'" mode=""></image>
										<view class="name">
											{{item.name}}
										</view>
										<view class="checkbox">
											<u-radio shape="circle" :disabled="item.disabled" activeColor="#FB683D" v-model="item.checked" :name="item.type"></u-radio>
										</view>
									</view>
								</u-col>
							</u-row>
						</view>
					</u-radio-group>
				</view>
				<view class="button">
					<button type="default" class="b1" @click="zhidao">查看收款码</button>
				</view>
				<view class="popup_top"></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				pay: false,
				show: false,
				password: "",
				type: 1,
				zhujian_id: "",
				info: {},
				timestamp: 0,
				state: 1,
				cover: "",
				picture: "../static/add.png",
				active: 0,
				payType: [{
						type: 1,
						checked: true,
						disabled: false,
						name: "微信",
						scale: 0
					}, {
						type: 2,
						checked: false,
						disabled: false,
						name: "支付宝",
						scale: 0
					},
					{
						type: 3,
						checked: false,
						disabled: false,
						name: "云闪付",
						scale: 0
					},
					{
						type: 4,
						checked: false,
						disabled: false,
						name: "聚合码",
						scale: 0
					},
					{
						type: 5,
						checked: false,
						disabled: false,
						name: "银行卡",
						scale: 0
					}
				],
				radioCheckWidth: '34',
				radioCheckWrap: false,
				likeFruit: 1
			}
		},
		onLoad(option) {
			than = this;
			if (option.state) {
				than.state = parseInt(option.state);
			}
			than.zhujian_id = option.zhujian_id;
			than.post("api/kmb/CollectionPictures", {
				zhujian_id: than.zhujian_id
			}, function(data) {
				var timestamp = Math.round(than.div((new Date()).getTime(), 1000));
				var buy_time = than.add(data.cj_time, than.mul(60, 120))
				than.timestamp = buy_time - timestamp
				if (data.credit_score <= 30) {
					data.text = "铜牌"
				} else if (data.credit_score <= 70 && data.credit_score > 30) {
					data.text = "银牌"
				} else {
					data.text = "金牌"
				}
				than.cover = data.link
				than.info = data
			})
		},
		onShow() {
			than.show = false;
		},
		methods: {
			checkboxGroupChange(e) {
				this.likeFruit = e;
			},
			zhidao() {
				than.post("api/kmb/choseCollectionPicture", {
					picture_type: than.likeFruit,
					zhujian_id: than.zhujian_id
				}, function(data) {
					than.toPage('/pages/htmlB/voucher/see?number=' + than.info.real_number + '&zhujian_id=' + than.zhujian_id +
						'&picture_type=' + than.likeFruit + '&img=' + data)
				})
			},
			toCheckNotSumbit() {
				than.post("api/kmb/toCheckNotSumbit", null, function(data) {})
			},
			checkSafePasswordEmpty() {
				than.post("api/member/checkSafePasswordEmpty", null, function(data) {
					if (parseInt(data) == 0) {
						than.toast("未设置二级密码")
						uni.navigateTo({
							url: "/pages/htmlA/setting/twopassword"
						})
					} else {
						than.pay = true;
					}
				})
			},
			onChange(val) {
				if (this.password.length < 6) {
					this.password += val;
				}

				if (this.password.length >= 6) {

					if (than.state == 1) {
						than.post('api/kmb/submitLink', {
							zhujian_id: than.zhujian_id,
							cover: than.cover,
							password: than.password
						}, function(data) {
							than.pay = false
							than.password = ""
							than.toast(data)
							setTimeout(function() {
								uni.navigateBack()
							}, 1500);
						})
					} else {
						than.post("api/kmb/submitLinkAgain", {
							zhujian_id: than.zhujian_id,
							password: than.password,
							cover: than.cover
						}, function(data) {
							than.toast("上传成功")
							setTimeout(function() {
								uni.navigateBack({
									delta: 2
								})
							}, 1500);
						})
					}
				}
			},
			upload() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: function(res) {
						than.uploadPost("api/image/uploadMultiple", res.tempFilePaths[0], "file", function(data) {
							than.cover = data.url
						})
					}
				});
			},
			onBackspace(e) {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			}
		}
	}
</script>

<style lang="less">
	page{
		background-color: #FAFAFA;
	}
	.payType {
		text-align: center;

		.popup_top {
			height: 30rpx;
		}

		._view {
			background: #FFFFFF;

			.title_item {
				height: 111rpx;
				line-height: 111rpx;
				text-align: center;
				border-bottom: 2rpx solid #F6F6F6;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.contentType {
				padding: 0 100rpx;

				.active {
					border: 1rpx solid #FFC31E !important;
					background: #FBF9F2;
				}

				.list {
					margin-top: 67rpx;
					text-align: center;
					border-radius: 20rpx;
					position: relative;
					border: 1rpx solid #FFFFFF;

					image {
						margin-top: 38rpx;
						width: 77rpx;
						height: 77rpx;
					}

					.checkbox {
						display: flex;
						justify-content: center;
					}

					.name {
						line-height: 60rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
					}
				}
			}
		}

		.button {
			margin: 20rpx auto 0;

			.b1 {
				margin: 36rpx auto 0;
				width: 245rpx;
				height: 74rpx;
				background: #FB683D;
				border-radius: 20rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 74rpx;
			}
		}
	}

	.button {
		padding-top: 24rpx;

		.u-button {
			width: 245rpx;
			height: 74rpx;
			color: #FFFFFF;
			background: #FB683D;
			box-shadow: 0px 6rpx 8rpx 0px rgba(170, 170, 170, 0.16);
			font-size: 32rpx;
		}
	}

	.content {
		padding: 0 36rpx;
		display: flex;
		align-items: center;

		.left {
			.add {
				width: 339rpx;
				height: 400rpx;
				background: #FDF4ED;
				border-radius: 20rpx;
				text-align: center;
				background-size: 100% 100%;

				image {
					margin-top: 110rpx;
					margin-bottom: 30rpx;
					width: 61rpx;
					height: 61rpx;
				}

				.name {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #3E3E3E;
				}
			}

			.text {
				margin-top: 20rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				justify-content: center;
				color: #333333;
				display: flex;
				align-items: center;

				text {
					font-weight: bold;
					margin-left: 10rpx;
					color: #F46813;
				}
			}
		}

		.right {
			margin-left: 40rpx;

			image {
				width: 232rpx;
				height: 400rpx;
			}

			.text {
				margin-top: 20rpx;
				text-align: center;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
		}
	}

	.user {
		margin: 0 36rpx 20rpx;
		height: 151rpx;
		background:white;
		border-radius: 20rpx;
		display: flex;
		align-items: center;

		.head {
			width: 107rpx;
			height: 107rpx;
			border-radius:50rpx;
			margin-left:20rpx;
			
		}

		.headIMG {
			width: 107rpx;
			height: 107rpx;
			margin: 0 24rpx;
			border-radius: 10rpx;
			text-align: center;

			image {
				margin: 20rpx 0 0;
				width: 44rpx;
				height: 44rpx;
			}

			.name {
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: bold;
			}
		}


		.right {
			margin-left: auto;
			text-align: center;
			margin-right: 23rpx;

			image {
				width: 77rpx;
				height: 77rpx;
			}

			.name {
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}

		.left {
			margin-left: 25rpx;

			.view {
				height: 50rpx;
				align-items: center;
				display: flex;

				.name {
					margin-right: 19rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}

				.text {
					font-size: 30rpx;
					font-family: DINCond-Black;
					font-weight: bold;

					text {
						margin-left: 10rpx;
						font-size: 26rpx;
					}
				}

				.add {
					color: #F46813;
				}

				.sub {
					color: #999999;
				}
			}
		}
	}

	.top {
		margin: 0 36rpx 20rpx;
		height: 151rpx;
		background: #F4F4F7;
		border-radius: 20rpx;
		text-align: center;
		line-height: 130rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #666666;
        .th{
			width:27rpx;
			height: 27rpx;
			margin-right:10rpx;
		}
		text {
			margin-left: 12rpx;
			font-size: 73rpx;
			font-family: DINCond-Black;
			font-weight: 400;
			font-style: initial;
			color: #F46813;
		}
	}

	.title {
		height: 90rpx;
		padding: 0 36rpx;
		display: flex;
		align-items: center;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;

		text {
			margin-left: 12rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
		}
	}
</style>
